<template>
  <div class="app-container">
    <div class="head-container">
      <comm-search @toSearch="initList()" v-if="showSearch">
        <template #left>
          <el-form-item>
            <el-input
                v-model="queryParam.blurry"
                clearable
                placeholder="输入名称或者邮箱搜索"
                @keyup.enter.native="initList()"
            />
          </el-form-item>
        </template>
      </comm-search>
      <comm-tool :selections="selections" v-model:show-search="showSearch" @toAdd="toAdds(false)"
                 @edit="toAdds(true,selections[0])"
                 @refresh="initList()" :del-url="baseUrl" :permission="permission"/>
    </div>

    <comm-edit-dialog v-model:dialog-show="editDialogShow"
                      title="用户" @save="toSave" :save-loading="saveLoading">
      <template #content>
        <el-form ref="form" :inline="true" :model="formData" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formData.username" :disabled="isEdit"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="formData.nickName"/>
              </el-form-item>

            </el-col>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" type="password"
                          :placeholder="!isEdit?'请输入密码':'为空则为不修改'"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input v-model.number="formData.phone"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio-group v-model="formData.gender" style="width: 178px">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色" prop="roles">
                <el-select
                    v-model="formData.roles"
                    multiple
                    placeholder="请选择"
                >
                  <el-option
                      v-for="item in roles"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </comm-edit-dialog>

    <el-table :loading="loading" :data="dataList" @selectionChange="selectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名"/>
      <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"/>
      <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱"/>
      <el-table-column label="状态" align="center" prop="enabled">
        <template #default="scope">
          <el-switch
              v-model="scope.row.enabled"
              active-color="#409EFF"
              inactive-color="#F56C6C"
              @change="changeEnable(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期"/>
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="scope">
          <comm-operation :data="scope.row" :url="baseUrl" @edit="toAdds(true,scope.row)"
                          :disabledDel="scope.row.id===1" @refresh="initList()" :permission="permission"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:page="queryParam.page" v-model:limit="queryParam.size" :total="total" @change="initList()"/>
  </div>
</template>

<script setup>
import {ref, toRefs, reactive, getCurrentInstance} from 'vue'
import Pagination from '@/components/Pagination'
import mixins from "@/mixins/mixins";
import CommSearch from "@/components/Comm/CommSearch.vue";
import CommTool from "@/components/Comm/CommTool.vue";
import CommEditDialog from "@/components/Comm/CommEditDialog.vue";
import CommOperation from "@/components/Comm/CommOperation.vue";
import {get, put} from "@/utils/request";
import {validatePass} from "@/utils/util";

const  permission={edit: ['user:edit'],del: ['user:del'],add:['user:add']}

const pageData = reactive({
  rules: {
    username: [{
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
      {
        min: 3,
        max: 20,
        message: '长度在 3 到 20 个字符',
        trigger: 'blur'
      }
    ],
    nickName: [{
      required: true,
      message: '请输入用户昵称',
      trigger: 'blur'
    }
    ],
    roles: [
      {type: 'array', required: true, message: '请选择角色', trigger: 'change'}
    ]
  }
})

const {initList, total, dataList, data, selectionChange, toAdd, toEdit, toSave} = mixins()
const {queryParam, loading, saveLoading, selections, showSearch, editDialogShow, formData, baseUrl} = toRefs(data)

const {rules} = toRefs(pageData)
const isEdit = ref(false)
const roles = ref([])
const company = ref([])
const {proxy} = getCurrentInstance();

baseUrl.value = '/users'


initList('/users')

function toAdds(edit, row) {
  isEdit.value = edit
  if (edit) {
    rules.value['password'] = [{
      required: false,
      trigger: 'blur',
      validator: validatePass
    }
    ]
  } else {
    rules.value['password'] = [{
      required: true,
      trigger: 'blur',
      validator: validatePass
    }
    ]
  }
  initRoles()
  if (edit) {
    toEdit(row)
  } else {
    toAdd({roles: []})
  }
}



function initRoles() {
  get('/roles/all').then(res => {
    for(let i=0; i<res.length;i++){
      roles.value.push({
        name : res[i].name,
        id : parseInt(res[i].id)
      })
    }
  })
}

function changeEnable(row) {
  put('/users/enable', {id: row.id}).then(res => {
    row.enable = !row.enable
  })
}
</script>


